<template>
  <div>
    <el-container>
      <el-header class="menu-container">
        <div class="keda_logo">
          <img src="../assets/keda.png" style="  border-right: 1px solid #f8f8f8;
  padding-right: 10px;">
          <span style="padding-left: 10px">科大国创项目管理系统</span>
        </div>
        <el-menu
          router
          :default-active="defaultActive"
          class="el-menu-demo center-menu"
          mode="horizontal"
          @select="handleSelect"
          background-color="#ffffff"
          text-color="#080808"
          active-text-color="#559eff">
          <el-menu-item index="workbench">工作台</el-menu-item>
          <el-menu-item index="contract">合同</el-menu-item>
          <el-menu-item index="project">项目</el-menu-item>
          <el-menu-item index="need">需求</el-menu-item>
          <el-menu-item index="flaw">缺陷</el-menu-item>
          <el-menu-item index="pom">PMO</el-menu-item>
        </el-menu>
        <div class="user_img">
          <el-dropdown trigger="click" placement="top-end" @command="handleCommand">
            <span class="avatar">
<!--            <img src="user-avatar.jpg" alt="User Avatar">-->
              <i class="el-icon-user">用户</i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="logout">退出</el-dropdown-item>
              <el-dropdown-item command="edit-profile">修改个人信息</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>
      <el-main>
        <keep-alive>
          <router-view style="min-height: 585px"></router-view>
        </keep-alive>
      </el-main>
      <el-footer class="footer">
          <span class="el-icon-s-custom">作者:<a>Run Everywhere</a></span>
      </el-footer>
    </el-container>

  </div>
</template>

<script>
export default {
  name: 'Index',
  data () {
    return {
    }
  },
  created () {
    // eslint-disable-next-line no-undef
    this.createInit()
  },
  computed: {
    defaultActive: function () {
      return this.$route.path.replace('/', '')
    }
  },
  methods: {
    handleSelect (key, keyPath) {
      console.log(key, keyPath)
      return this.$route.path.replace('/', keyPath)
    },
    handleCommand (command) {
      if (command === 'logout') {
        // 处理退出逻辑
      } else if (command === 'edit-profile') {
        // 处理修改个人信息逻辑
      }
    },
    createInit () {
      if (this.$route.path !== '/workbench') {
        this.$router.push('/workbench')
      }
    }
  }
}
</script>

<style scoped>
.footer{
  background-color: #f8f8f8;
  height: 40px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.footer span{
  font-size: 12px;
}
.footer a{
  color: #1989FA;
}
/deep/.el-menu .el-menu-item:hover{
  outline: 0 !important;
  color: #fff !important;
  background-color: #56b7ff!important;
  /*background: linear-gradient(270deg, #F2F7FC 0%, #FEFEFE 100%)!important;*/
}
/deep/.el-menu .el-menu-item.is-active {
  color: #fff !important;
  background-color: #56b7ff!important;
  /*background: linear-gradient(270deg, #F2F7FC 0%, #FEFEFE 100%)!important;*/
}
.el-submenu /deep/.el-submenu__title:hover {
  color: #fff !important;
  background-color: #56b7ff!important;
  /*background: linear-gradient(270deg, #F2F7FC 0%, #FEFEFE 100%)!important;*/
}
/*.center-menu {*/
/*  display: flex;*/
/*  justify-content: space-between;*/
/*  align-items: center;*/
/*}*/
/*.center-menu {*/
/*  display: flex;*/
/*  justify-content: center;*/
/*}*/
.menu-container {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #f8f8f8;
  box-shadow: 0px 4px 4px #f8f8f8;
}

.keda_logo {
  order: -1; /* 将 keda_logo 放在最左边 */
  display: flex;
  align-items: center;
}

.user_img {
  display: flex;
  align-items: center;
  order: 1; /* 将 user_img 放在最右边 */
}
.user_img :hover{
  cursor:pointer
}

</style>
